<!DOCTYPE html>
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${sys.sysName}">XXX系统</title>
    <link rel="shortcut icon" th:href='${sys.sysLogo}' th:mce_href='${sys.sysLogo}' type="image/x-icon">
    <!-- 引入公用部分 -->
    <script th:replace="common/head::static"></script>
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <div class="layui-header"  th:style="${' background-color:' + sys.sysColor + ' !important;'}">
            <div class="layui-logo"><img th:src='${sys.sysLogo}' class="layui-nav-img"/> <span th:text="${sys.sysName}"></span></div>
            <ul class="layui-nav layui-layout-left">
                <!-- 动态读取加载用户快捷菜单 -->
                <li class="layui-nav-item" th:each="menu,iterStat : ${shortcutMenuList}" th:unless="${#lists.size(menu.children)} eq 0">
                    <a th:text="${menu.shortcutMenuName}" href="javascript:;">XXX</a>
                    <dl class="layui-nav-child" >
                        <dd th:each="childMenu,iterStat : ${menu.children}"><a class="huanzi-menu" th:data-url="${childMenu.shortcutMenuPath.indexOf('http') == -1 ? #request.getContextPath() + childMenu.shortcutMenuPath : childMenu.shortcutMenuPath}" th:data-id="${childMenu.shortcutMenuId}" th:text="${childMenu.shortcutMenuName}" href="javascript:;">XXX</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" th:each="menu,iterStat : ${shortcutMenuList}" th:if="${#lists.size(menu.children)} eq 0">
                    <a class="huanzi-menu" th:data-url="${menu.shortcutMenuPath.indexOf('http') == -1 ? #request.getContextPath() + menu.shortcutMenuPath : menu.shortcutMenuPath}" th:data-id="${menu.shortcutMenuId}" th:text="${menu.shortcutMenuName}" href="javascript:;">XXX</a>
                </li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img src="https://avatar.gitee.com/uploads/0/5137900_huanzi-qch.png!avatar100?1562729811"
                             class="layui-nav-img">
                        <span th:text="${loginUser.userName}">XXX</span>
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a class="huanzi-menu" th:data-url="${#request.getContextPath()} + '/user/userinfo'" data-id="userinfo" href="javascript:;">基本资料</a></dd>
                        <dd><a class="huanzi-menu" th:data-url="${#request.getContextPath()} + '/user/shortcMenu'" data-id="shortcMenu" href="javascript:;">个性菜单</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a th:href="@{/logout}">退出</a></li>
            </ul>
        </div>

        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <div class="layui-side layui-bg-black"  th:style="${' background-color:' + sys.sysColor + ' !important;'}">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree" lay-filter="test"  th:style="${' background-color:' + sys.sysColor + ' !important;'}">
                    <!-- 动态读取加载系统菜单 -->
                    <div th:each="menu,iterStat : ${menuList}">
                        <li class="layui-nav-item" th:unless="${#lists.size(menu.children)} eq 0">
                            <a th:text="${menu.menuName}" href="javascript:;">XXX</a>
                            <dl class="layui-nav-child" th:each="childMenu,iterStat : ${menu.children}">
                                <dd><a class="huanzi-menu" th:data-url="${#request.getContextPath() + childMenu.menuPath}" th:data-id="${childMenu.menuId}" th:text="${childMenu.menuName}" href="javascript:;">XXX</a></dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item" th:if="${#lists.size(menu.children)} eq 0">
                            <a class="huanzi-menu" th:data-url="${#request.getContextPath() + menu.menuPath}" th:data-id="${menu.menuId}" th:text="${menu.menuName}" href="javascript:;">XXX</a>
                        </li>
                    </div>
                </ul>
            </div>
        </div>

        <!-- 内容主体区域 -->
        <div class="layui-body" style="overflow-y: hidden;">
            <!--   动态选项卡   -->
            <div class="layui-tab" lay-filter="demo" lay-allowclose="true">
                <!-- 标题 -->
                <ul class="layui-tab-title">
                    <li class="layui-this" lay-id="11">首页</li>
                </ul>
                <!-- 内容 -->
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-row layui-col-space15" style="padding: 20px;background-color: #F2F2F2;">
                            <div class="layui-col-md6">
                                <div class="layui-card">
                                    <div class="layui-card-header">欢迎使用</div>
                                    <div class="layui-card-body">
                                        欢迎你，<span th:text="${loginUser.userName}"></span>
                                        <br/>
                                        <br/>
                                        <p>Base Admin是一套简单通用的后台管理系统，主要功能有：权限管理、菜单管理、用户管理，系统设置、实时日志，实时监控，API加密，以及登录用户修改密码、配置个性菜单等</p>
                                        <br/>
                                        <br/>
                                        <p>作者：huanzi-qch</p>
                                        <p>博客：https://www.cnblogs.com/huanzi-qch</p>
                                        <p>github：https://github.com/huanzi-qch</p>
                                        <p>gitee：https://gitee.com/huanzi-qch</p>
                                        <p>QQ交流群：1015379123</p>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md6">
                                <div class="layui-card">
                                    <div class="layui-card-header">系统公告</div>
                                    <div class="layui-card-body">
                                        <div th:utext="${sys.sysNoticeText}"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md6">
                                <div class="layui-card">
                                    <div class="layui-card-header">AD广告位（长期招租，如有需要请私信）</div>
                                    <div class="layui-card-body">
                                        <a target="_blank" href="https://s.click.taobao.com/zb70Vtu">阿里云服务器（ECS）等，高性能服务器，就选阿里云</a><br/>
                                        <a target="_blank" href="https://s.click.taobao.com/q9rZYtu">虚机+服务器，独享虚机服务 1c1g 3M带宽</a><br/>
                                        <a target="_blank" href="https://s.click.taobao.com/2khzUtu">云服务器，企业级云服务器特惠5折</a><br/>
                                        <a target="_blank" href="https://s.click.taobao.com/vLrzUtu">全民云计算，1核1G仅需293元/年</a><br/>
                                        <a target="_blank" href="https://s.click.taobao.com/8PG0Vtu">云服务器，低至323元/年</a><br/>
                                        <a target="_blank" href="https://s.click.taobao.com/L110Vtu">云服务器，十倍性能提升,最佳性价比</a><br/>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md12">
                                <div class="layui-card">
                                    <div class="layui-card-header">AD广告位（长期招租，如有需要请私信）</div>
                                    <div class="layui-card-body">
                                        <a target="_blank" href="https://s.click.taobao.com/zb70Vtu">阿里云服务器（ECS）等，高性能服务器，就选阿里云</a><br/>
                                        <a target="_blank" href="https://s.click.taobao.com/q9rZYtu">虚机+服务器，独享虚机服务 1c1g 3M带宽</a><br/>
                                        <a target="_blank" href="https://s.click.taobao.com/2khzUtu">云服务器，企业级云服务器特惠5折</a><br/>
                                        <a target="_blank" href="https://s.click.taobao.com/vLrzUtu">全民云计算，1核1G仅需293元/年</a><br/>
                                        <a target="_blank" href="https://s.click.taobao.com/8PG0Vtu">云服务器，低至323元/年</a><br/>
                                        <a target="_blank" href="https://s.click.taobao.com/L110Vtu">云服务器，十倍性能提升,最佳性价比</a><br/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部固定区域 -->
        <div class="layui-footer" th:utext="${sys.sysBottomText}">
            © XXX系统
        </div>
    </div>
    <script th:inline="javascript">
        //获取后端RSA公钥并存到sessionStorage
        sessionStorage.setItem('javaPublicKey', [[${publicKey}]]);

        //获取api加密开关并存到sessionStorage
        sessionStorage.setItem('sysApiEncrypt', [[${sys.sysApiEncrypt}]]);

        //重写jq的ajax加密
        jQueryExtend.ajaxExtend();
    </script>
    <script>
        layui.use('element', function () {
            let element = layui.element;

            $("body").on("click", ".huanzi-menu", function (e) {
                let url = $(this).data("url");
                let id = $(this).data("id");
                let text = $(this).text();

                //如果不存在
                if ($(".layui-tab-title").find("li[lay-id='" + id + "']").length <= 0) {
                    let height = document.documentElement.clientHeight - 160 + "px";
                    element.tabAdd('demo', {
                        title: text,
                        //iframe子页面onload新增监听src为/loginPage是父页面跳转/loginPage，解决“俄罗斯套娃”问题
                        content: "<iframe onload='if(this.contentWindow.location.pathname == \""+ctx+"/loginPage\"){window.location.href = \""+ctx+"/loginPage\"} $(this)[0].height = document.documentElement.clientHeight-160' width='100%' height='" + height + "' frameborder='0' scrolling='auto' src=\"" + url + "\"></iframe>",
                        id: id
                    });
                }
                element.tabChange('demo', id);
            });
        });
    </script>
</body>
</html>
